<template>
  <div class="page-container">
    <el-tabs v-model="activeName" class="fit-box full-height">
      <el-tab-pane label="脚本执行情况" name="detail" class="fit-box full-height">
        <!--表格内容栏-->
        <ac-table
          ref="dataTable"
          pkName="id"
          :filters="filters"
          :filterFields="filterFields"
          :columns="columns"
          :defaultSort="defaultSort"
          @handleCellOperator="handleCellOperator"
        ></ac-table>
      </el-tab-pane>
      <el-tab-pane label="脚本执行统计" name="total" class="fit-box full-height">
        <!--表格内容栏-->
        <ac-table
          ref="totalTable"
          pkName="groovyId"
          dataUrl="/system/scriptExecute/queryExecuteCount"
          :pageSort="true"
          :filters="totalFilters"
          :filterFields="totalFilterFields"
          :columns="totalColumns"
        ></ac-table>
      </el-tab-pane>
    </el-tabs>
  </div>

  <el-dialog
    v-model="dialogVisible"
    width="800px"
    :title="dialogTitle"
    :close-on-click-modal="false"
    destroy-on-close
    draggable
  >
    <el-form
      label-width="100px"
      label-position="right"
      :disabled="!dialogEdit"
      :model="formData"
      :hide-required-asterisk="!dialogEdit"
      v-loading="dialogLoading"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="脚本名称" prop="groovyName">
            <el-input v-model="formData.groovyName" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="执行结果" prop="result">
            <el-input v-model="formData.result" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="开始时间" prop="startTime">
            <ac-datetime v-model="formData.startTime" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="结束时间" prop="endTime">
            <ac-datetime v-model="formData.endTime" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="参数" prop="params">
            <el-input type="textarea" rows="5" v-model="formData.params" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="失败信息" prop="message">
            <el-input type="textarea" rows="5" v-model="formData.message" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="耗时" prop="takeTime">
            <el-input v-model="formData.takeTime" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建时间" prop="createTime">
            <ac-datetime v-model="formData.createTime" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button
        size="default"
        type="info"
        @click="dialogVisible=false"
      >关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue';
import tool from "@/utils/tool";
import api from "@/http/api";

const filters = ref({
  groovyId: '',
  result: ''
});
const filterFields = ref([
  {
    prop: "groovyId",
    label: "脚本名称",
    type: 'tree',
    dataUrl: '/system/scriptGroovy/queryTree',
    typeSelect: 'script',
    placeholder: '脚本名称'
  },
  {prop: "result", label: "执行结果", type: 'select', options: "成功,失败"},
]);
const columns = ref([
  {prop: "groovyName", label: "脚本名称", minWidth: 120, sortable: false, click: true},
  {prop: "result", label: "执行结果", width: 100},
  {prop: "startTime", label: "开始时间", width: 160, type: "datetime"},
  {prop: "endTime", label: "结束时间", width: 160, type: "datetime"},
  {prop: "takeTime", label: "耗时", width: 180, align: 'right', formatter: (prop, value) => {
      return value ? tool.formatTime(value) : '';
    }
  },
  {prop: "message", label: "失败信息", minWidth: 140},
  {prop: "createTime", label: "创建时间", width: 160, type: "datetime"}
]);
const defaultSort = ref({prop: 'createTime', order: 'descending'});

const totalFilters = ref({pageSize: 10000});
const totalFilterFields = ref([
  {
    prop: "groovyId",
    label: "脚本名称",
    type: 'tree',
    dataUrl: '/system/scriptGroovy/queryTree',
    typeSelect: 'script',
    placeholder: '脚本名称'
  },
]);
const totalColumns = ref([
  {prop: "groovyName", label: "脚本名称", minWidth: 120},
  {prop: "executeCount", label: "执行总次数", width: 120, align: 'right'},
  {prop: "takeTime", label: "执行总耗时", width: 180, align: 'right', formatter: (prop, value) => {
      return value ? tool.formatTime(value) : '';
    }
  },
  {prop: "avgTime", label: "平均耗时", width: 180, align: 'right', formatter: (prop, value, row) => {
      if (row.takeTime > 0 && row.executeCount > 0) {
        return tool.formatTime(row.takeTime/row.executeCount);
      } else {
        return '';
      }
    }
  },
  {prop: "createTime", label: "最后一次执行时间", width: 160, type: "datetime"},
]);

const activeName = ref('detail');
const dialogVisible = ref(false);
const dialogLoading = ref(true);
const dialogEdit = ref(false);
const dialogTitle = ref('');
const formData = ref({});

const handleCellOperator = (prop, value, data) => {
  dialogLoading.value = true;
  formData.value = {};
  dialogTitle.value = "查看执行明细";
  dialogVisible.value = true;
  dialogEdit.value = false;

  api.post('/system/scriptExecute/queryBy', {id: data.id}).then(res => {
    const data = res.data || {};
    if (data.takeTime) {
      data.takeTime = tool.formatTime(data.takeTime) || '';
    }
    formData.value = data;
    dialogTitle.value = "查看执行明细";
    dialogVisible.value = true;
    dialogEdit.value = false;
    dialogLoading.value = false;
  });
};
</script>